<script setup lang="ts">

</script>

<template>
  <ul class="mb-20 flex flex-col gap-2">
    <li class="flex justify-between items-center hover:bg-[#ccdfdc] ">
      <div class="song-and-info flex gap-5 justify-center items-center">
        <img src="../img/song-pic.png" class="w-25">
        <p class="text-cyan-6 font-600">歌名1</p>
      </div>
      <p class="text-gray-6">歌手1</p>
      <div>
        <img src="../img/love.png " class="w-25">
      </div>
    </li>

    <li class="flex justify-between items-center hover:bg-[#ccdfdc] ">
      <div class="song-and-info flex gap-5 justify-center items-center">
        <img src="../img/song-pic.png" class="w-25">
        <p class="text-cyan-6 font-600">歌名2</p>
      </div>
      <p class="text-gray-6">歌手2</p>
      <div>
        <img src="../img/love.png " class="w-25">
      </div>
    </li>

    <li class="flex justify-between items-center hover:bg-[#ccdfdc] ">
      <div class="song-and-info flex gap-5 justify-center items-center">
        <img src="../img/song-pic.png" class="w-25">
        <p class="text-cyan-6 font-600">歌名3</p>
      </div>
      <p class="text-gray-6">歌手3</p>
      <div>
        <img src="../img/love.png " class="w-25">
      </div>
    </li>

    <li class="flex justify-between items-center hover:bg-[#ccdfdc] ">
      <div class="song-and-info flex gap-5 justify-center items-center">
        <img src="../img/song-pic.png" class="w-25">
        <p class="text-cyan-6 font-600">歌名4</p>
      </div>
      <p class="text-gray-6">歌手4</p>
      <div>
        <img src="../img/love.png " class="w-25">
      </div>
    </li>

    <li class="flex justify-between items-center hover:bg-[#ccdfdc] ">
      <div class="song-and-info flex gap-5 justify-center items-center">
        <img src="../img/song-pic.png" class="w-25">
        <p class="text-cyan-6 font-600">歌名5</p>
      </div>
      <p class="text-gray-6">歌手5</p>
      <div>
        <img src="../img/love.png " class="w-25">
      </div>
    </li>

    <li class="flex justify-between items-center hover:bg-[#ccdfdc] ">
      <div class="song-and-info flex gap-5 justify-center items-center">
        <img src="../img/song-pic.png" class="w-25">
        <p class="text-cyan-6 font-600">歌名6</p>
      </div>
      <p class="text-gray-6">歌手6</p>
      <div>
        <img src="../img/love.png " class="w-25">
      </div>
    </li>
  </ul>
</template>

<style scoped>

</style>